<template>
	<div class="index_view">
		<div class="menu flex">
			<!-- <router-link to="musicCol" class="active">
				音乐
			</router-link>
			
			<router-link to="musicCola">
				视频
			</router-link>
			
			<router-link to="musicColb">
				电台
			</router-link> -->
			<span v-for="(item, index) in menu">
				<a href="javascript:void(0)" @click="acIndex=index" :class="index === acIndex?'active':''" :key="index">
					{{ item }}
				</a>
			</span>
		</div>
		<!-- <router-view></router-view> -->
		<swiper  :options="swiperOption" class="swiper-container" ref="iviewSwiper" style="width:100%;padding-bottom: 90px;background-color: #eef2f1;">
			<swiper-slide  :key="1">
				<div class="tab-swiper">
					<keep-alive>
						<musicCol @connect='connect' />
					</keep-alive>
				</div>
			</swiper-slide>
			<swiper-slide  :key="2">
				<div v-if="acIndex == 1"><mvCol /></div>
			</swiper-slide>
			<swiper-slide  :key="3">
				<div v-if="acIndex == 2"><mvCol /></div>
			</swiper-slide>
		</swiper>

		<transition name="slide">
			<musicListView v-if="playListDet_s" @connect="connect" />
		</transition>
	</div>
</template>

<script>
import {swiper, swiperSlide} from 'vue-awesome-swiper';
import musicListView from './musicListView';

export default{
	components: {
		swiper,
		swiperSlide,
		musicListView,
		musicCol: s => require.ensure([], () => s(require('./musicCol/musicCol')), 'musicCol'),
		mvCol: s => require.ensure([], () => s(require('./mvCol/mvCol')), 'mvCol')
	},
	name: 'index_view',
	data() {
		return {
			menu: ['音乐', '视频', '电台'],
			acIndex: 0,
			swiperOption: {
                notNextTick: true,
                speed: 400,
                // 用户操作swiper之后，是否禁止autoplay。默认为true：停止
                // autoplayDisableOnInteraction: true,
                centeredSlides: true,
                paginationClickable: true,
                spaceBetween: 0,
                onSlideChangeEnd: swiper => {
					console.log(swiper.realIndex);
					this.acIndex = swiper.realIndex;
                }
            },
            playListDet_s: false
		};
	},
	computed: {
		swiper() {
			return this.$refs.iviewSwiper.swiper;
		}
    },
    watch: {
		acIndex() {
			// 切换到某个slide，速度为.8秒
			this.swiper.slideTo(this.acIndex, 300, false);
		}
    },
    methods: {
		connect(arg) {
			this.playListDet_s = !this.playListDet_s;
		}
    }
};
</script>
<style lang='scss' scoped>
@import '../base.scss';

.index_view{
	width:100%;
	.menu{
		height:.8rem;justify-content:space-evenly;align-items:center;
		a{
			display:block;width:1.38rem;line-height: .8rem;
			&.active{ border-bottom:.03rem $red solid;}
		}
	}
}
.slide-enter-active,.slide-leave-active{transition: all .3s;}
.slide-enter,.slide-leave-to{opacity: 0;top:100%}
.slide-enter-to{opacity: 1;top:0}
</style>